<template>
    <div id="map" style="width: 100%; height: 500px;"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {getWaterMap} from "@/api/indexs";
window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: "2353313c155de6c8befa6921880c92fe",
};

export default {
    name: 'MapComponent',
    data() {
        return {
            currentRole: 'adminDashboard',
            map: null,
            polyline: null,
            mapData: [],
            markers: [],
            lnglat: [117.120128,36.652069],
            AMapPluyins: ["AMap.Geolocation","AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder","AMap.ControlBar"],
        }
    },
    mounted() {
        this.getWaterMaps();
    },
    methods: {
        getWaterMaps() {
            let _self = this
            getWaterMap().then(res => {
                const {data} = res
                _self.mapList = data
                _self.mapData = data


                this.initMap();
            })
        },

        initMap() {
            let _self = this
            let centerLen = _self.lnglat;
            AMapLoader.load({
                key: "86df05c4db672bcbfabc7c71226a5c0a", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
            }).then((AMap) => {
                _self.map = new AMap.Map("map", {viewMode: "3D", //是否为3D地图模式
                    terrain: true,
                    zoom: 13,
                    center: [113.94,28.22],  //地图初始展示中心位置
                    // mapStyle: 'amap://styles/normal',
                    features: ['road','point']});

                // 创建点标点
                // this.createMarkers();
                _self.markPoints()

            }).catch((e) => { });
        },


        markPoints() {
            let _that = this
            console.log(this.mapData)
            var overlays = [];
            _that.mapData.forEach(item => {
                if (item.lat) {
                    console.log(item)
                    // 创建一个 Marker 实例：
                    const marker = new AMap.Marker({
                        name: item.water_title,
                        // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
                        position: new AMap.LngLat(item.lng, item.lat),   // 经纬度对象，也可
                    });


                    _that.map.setFitView();
                    _that.map.add(marker);
                    //给标记点添加事件
                    // this.setInfoWindows( item)
                    marker.on('mousemove', (e) => {
                        _that.setInfoWindows(item);
                    })

                    overlays.push(marker); // 将标记添加到overlays数组中
                }
            });
            var overlayGroup = new AMap.OverlayGroup(overlays); // 注意：OverlayGroup主要用于管理不同类型的覆盖物，通常不直接用于显示信息窗口。这里仅为示例。
            _that.map.add(overlayGroup);
        },
        //显示的弹出框组件
        setInfoWindows(item) {
            // 信息窗体的内容

            // 创建 infoWindow 实例
            let content = item.water_title;
            let infoWindow = new AMap.InfoWindow({
                anchor: 'bottom-center',
                content: content,
            });

            // 打开信息窗体
            let position = this.map.getCenter()
            // dd.pos = [e.pos[0], e.pos[1]]
            position.lat = item.lat
            position.lng = item.lng
            console.log(position)

            // infoWindow.open(this.map, this.map.getCenter());
            infoWindow.open(this.map, position);
        },
        //点击获取经纬度
        latitude() {
            this.map.on('click', function (ev) {
                // console.log(ev)
                // 触发事件的对象
                let target = ev.target;
                // 触发事件的地理坐标，AMap.LngLat 类型
                let lnglat = ev.lnglat;
                // 触发事件的像素坐标，AMap.Pixel 类型
                let pixel = ev.pixel;
                // 触发事件类型
                let type = ev.type;
                console.log(target, lnglat, pixel, type)
            });
        },
        markPoint() {
            let _self = this
            //创建图标icon
            var icon = new AMap.Icon({
                image: "https//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // 图标的图片地址
                // size: new AMap.Size(32, 32), // 图标的大小
                // className: "your-icon-class" // CSS类名---通过类名去设置样式
            });

            // 根据经纬度数组，循环生成多个标记点
            _self.mapList.forEach((item) => {
                console.log("item",item)
                // 创建一个 Marker 实例：
                const marker = new AMap.Marker({
                    position: new AMap.LngLat(item.lng, item.lat), // 经纬度
                    map: _self.map,
                    icon: icon, // 使用自定义的图标
                    offset: new AMap.Pixel(-0.5, -16), // 设置偏移量，负值向左上方偏移
                    anchor: "center", // 设置标记点的锚点位置
                });

                // 将创建的点标记添加到已有的地图实例：
                _self.map.add(marker);
                _self.map.setFitView();
            });
        },
    }
}
</script>
